<template>
    <div class="video-page">
        <el-row>
            <el-col :xs="24">
                <button @click="showList">查看摄像头和麦克风</button>

                <el-select v-model="microPhone" placeholder="请选择" @change="onChange">
                  <el-option
                    v-for="(item,index) in microPhoneList"
                    :key="index"
                    :label="item.label"
                    :value="item.id"
                    >
                  </el-option>
                </el-select>

                <el-select v-model="camera" placeholder="请选择" @change="onChange">
                  <el-option
                    v-for="(item,index) in cameraList"
                    :key="index"
                    :label="item.label"
                    :value="item.id"
                    >
                  </el-option>
                </el-select>
                
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: 'setting',
    data() {
        return {
            //video
            videoObj: null,
            streamer: null,
            microPhone:'',
            microPhoneList:[],
            camera:'',
            cameraList:[]
        };
    },
    created() {},
    mounted() {
        this.showList();
    },
    methods: {
        showList() {
            navigator.mediaDevices
                .enumerateDevices()
                .then((deviceInfos)=>{
                    this.microPhoneList = [];
                    this.cameraList = [];
                    for (let i = 0; i !== deviceInfos.length; ++i) {
                        let deviceInfo = deviceInfos[i];
                        let option = {};
                        option.id = deviceInfo.deviceId;
                        if (deviceInfo.kind === "audioinput") {
                            option.label =
                                deviceInfo.label ||
                                "microphone " + (audioSelect.length + 1);
                            this.microPhoneList.push(option);
                        } else if (deviceInfo.kind === "videoinput") {
                            option.label =
                                deviceInfo.label ||
                                "camera " + (videoSelect.length + 1);
                            this.cameraList.push(option);
                        } else {
                            console.log(
                                "Found one other kind of source/device: ",
                                deviceInfo
                            );
                        }
                    }
                    this.microPhone = this.microPhoneList[this.microPhoneList.length-1].id;
                    this.camera = this.cameraList[this.cameraList.length-1].id;
                    // this.videoStart();
                })
                .catch((err)=>{
                    console.log(err);
                });
        },
        onChange(){
            let constraints = {};

            if(this.microPhone){
                constraints.audio = {deviceId:{exact: this.microPhone}};
            }else{
                constraints.audio = false;
            }
            if(this.camera){
                constraints.video = {deviceId:{exact: this.camera}};
            }else{
                constraints.video = false;
            }

            if(!this.camera && !this.microPhone){
                this.$message({message:'摄像头和麦克风必须开启一个才能直播',type:'warning'})
                return ;
            }
            console.log(constraints)
        },
    }
};
</script>

<style lang="scss" scoped>
/* .video-page {
    background: #ffffff;
    padding: 10px;
    min-height: 100%;
    .poster {
        width: 640px;
        height: 480px;
        background-color: #f2f2f2;
        color: #666666;
        line-height: 480px;
        text-align: center;
        position: absolute;
    }
    .ctrls {
        position: static;
        width: 100%;
        background-image: linear-gradient(to right, red, green 50%, blue 100%);
        bottom: 15px;
        left: 0px;
        z-index: 1000;
        text-align: center;
        .screen {
            border: 0;
            border-radius: 5px;
            outline: none;
            background-image: radial-gradient(
                farthest-corner at 0px 0px,
                #f35 0%,
                #43e 100%
            );
            padding: 10px 15px;
            margin: 10px 15px;
        }
    }
} */
</style>
